<template>
  <div>
    <div class="div">
      <ul>
          <li>
            <div v-if="!this.$store.state.user==''">
              <span @click="login">登录</span>
              <span @click="zhuCe">&emsp; 注册 </span>
            </div>
            <div v-else>
              欢迎
              <el-popover placement="top" width="180" v-model="visible">
                <p>确定退出登录吗？</p>
                <div style="text-align: right; margin: 10px 0 0">
                  <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="logout">确定</el-button>
                </div>
                <el-button type="text" slot="reference">{{this.$store.getters.getUser.user}}</el-button>
              </el-popover>
            </div>
          </li>
        <li>
          <router-link to="/order">我的订单</router-link>
        </li>
        <li>
          <router-link to="/collect">我的收藏</router-link>
        </li>
        <router-link to="/shoppingCart">
          <li class="li1">购物车 (0)</li>
        </router-link>
      </ul>
    </div>

    <div class="header">
      <div class="box">
        <ul>
          <div>
            <img src="./assets/imgs/logo.png" alt="" />
          </div>
          <li
            v-for="(item, index) in tr"
            :key="index"
            :class="{ active: num == item.id }"
          >
            <router-link :to="item.pathName" @click="fn(item.id)">{{
              item.name
            }}</router-link>
          </li>
          <div class="two">
            <el-input
              v-model="keyword"
              placeholder="Please input"
              class="input-with-select"
             
            >
            <el-button slot="append" icon="el-icon-search" @click="Search"></el-button>
            </el-input>
          </div>
        </ul>
      </div>
    </div>


  <el-dialog title="登录" width="300px" center :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" :rules="rules" status-icon ref="ruleForm" class="demo-ruleForm">
        <el-form-item prop="userName">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="ruleForm.userName"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            prefix-icon="el-icon-view"
            type="password"
            placeholder="请输入密码"
            v-model="ruleForm.password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="submitForm('ruleForm')" style="width:100%;">登录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 登录  -->
      
    <el-dialog title="注册" :visible.sync="dialogFormVisible1">
      <el-form
        :model="ruleForm1"
        :rules="rules1"
        ref="ruleForm1"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="userName">
          <el-input
            v-model="ruleForm1.userName"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="ruleForm1.password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="rePassword">
          <el-input
            v-model="ruleForm1.rePassword"
            placeholder="请再次输入密码"
          ></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = true">取 消</el-button>
        <el-button type="primary" @click="submitForm1('ruleForm1')"
          >确 定</el-button
        >
      </div>
    </el-dialog> 
    <router-view></router-view>
    <!-- 底部 -->
    <div class="bottom">
      <div class="bottom1">
        <p>满99元全场免邮</p>
        <p>7天无理由退货</p>
        <p>100%品质保证</p>
      </div>
      <div class="bottom2"></div>
      <div class="bottom1"></div>
    </div>
  </div>
</template>

<script>
import { aLogin, register, } from "./api/api";
import { mapState,mapActions  } from "vuex";
export default {
  data() {
    return {
        visible: false,
      // token:JSON.parse(localStorage.getItem("user")  || {}),
      // token: localStorage.getItem("user"),
      token: {},
      num: 0,
      tr: [
        { id: 1, name: "首页", pathName: "/" },
        { id: 1, name: "全部商品", pathName: "goods" },
        { id: 1, name: "关于我们", pathName: "about" },
      ],
      isEdit: true,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      text1: "登录 ",
      text2: "注册",
      keyword: "",
      params: {
        search: this.keyword,
        currentPage: 1,
        pageSize: 15,
      },
      ruleForm: {
        userName: "",
        password: "",
      },
      // 以字母开头，允许5-16字节，允许字母数字下划线
      rules: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "以字母开头,允许5-16字节,允许字母数字下划线",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "以字母开头,允许6-18字节,允许字母数字下划线",
            trigger: "blur",
          },
        ],
      },
      ruleForm1: {
        userName: "",
        password: "",
        rePassword: "",
      },
      // 以字母开头，允许5-16字节，允许字母数字下划线
      rules1: {
        userName: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 5,
            max: 16,
            message: "以字母开头,允许5-16字节,允许字母数字下划线",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "以字母开头,允许6-18字节,允许字母数字下划线",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["carr"]),
    // 获取vuex中的showLogin，控制登录组件是否显示
    isLogin: {
      get() {
        return this.$store.getters.getShowLogin;
      },
      set(val) {
        this.$refs["ruleForm"].resetFields();
        this.setShowLogin(val);
      }
    }
  },
 
  methods: {
     ...mapActions(["setUser", "setShowLogin"]),
    // 搜索
     Search() {
      if (this.keyword != "") {
        // 跳转到全部商品页面,并传递搜索条件
        this.$router.push({ path: "/goods", query: { search: this.keyword } });
        this.keyword = "";
      }else{
        this.$message.warning("搜索内容为空")
      }
    },
    // /退出
    logout() {
      console.log(2);
       // 清空本地登录信息
      localStorage.setItem("user", ""); 
      // 清空vuex登录信息
      this.setUser("");
              this.$notify.success({
          title: "成功",
          message: "成功退出登录",
          type: "success",
        });
      this.visible=false
    },
    // 首页样式切换
    fn(v) {
      this.num = v;
    },
    login() {
      this.dialogFormVisible = true;
    },
    // 登录
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          let res = await aLogin(this.ruleForm);
          console.log(res, "resLogin");
              // “001”代表登录成功，其他的均为失败
              if (res.code == "001") {
                // 隐藏登录组件
                this.dialogFormVisible = false;
                // 登录信息存到本地
                console.log(res.user,"user");
                // localStorage.setItem("user",res.user);
                localStorage.setItem("user",JSON.stringify(res.user))
                // 登录信息存到vuex
                this.setUser(res.user);
                // 弹出通知框提示登录成功信息
                        this.$notify.success({
          title: "成功",
          message: res.msg,
          type: "success",
        });
              } else {
                // 清空输入框的校验状态
                this.$refs["ruleForm"].resetFields();
                // 弹出通知框提示登录失败信息
                this.notifyError(res.data.msg);
              }

          // this.$store.dispatch("zhuChange", this.ruleForm).then((res) => {
          //   if ((res.code = "001")) {
          //     this.dialogFormVisible = false;
          //   }
          // });
                  

        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 注册
    zhuCe() {
      this.dialogFormVisible1 = true;
    },
    submitForm1(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // alert("submit!");
          let res = await register(this.ruleForm1);
          console.log(res, "register");
          if ((res.code = "001")) {
            localStorage.setItem("zhuCe", JSON.stringify(this.ruleForm1));
            // // localStorage.setItem("user");
            // console.log(this.token, "token");
            // this.text2 = "欢迎" + this.token.userName;
            // this.text1 = "";
            // this.login();
            this.dialogFormVisible1 = false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style  >
.button {
  border: none;
  background-color: rgb(59, 59, 59);
}
.bottom {
  width: 100%;
  text-align: center;
  background: #2f2f2f;
  padding-bottom: 20px;
  margin-top: 20px;
  /* position: fixed;
  bottom: 0; */
}
.bottom1 {
  margin: 0 auto;
  border-bottom: 1px solid #3d3d3d;
  line-height: 145px;
}
.bottom1 p {
  color: #fff;
  font-size: 20px;
  margin-right: 210px;
  padding-left: 44px;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  text-decoration: none;
  background: url()
    no-repeat left 0;
}
.bottom2 {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  background: url()
    no-repeat;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
li {
  list-style: none;
}
html,
#app,
body {
  background-color: rgb(244, 244, 244);
  box-sizing: border-box;
}
.li1 {
  width: 100%;
  height: 100%;
  margin-right: 20px;
  text-align: center;
}
.li1:hover {
  background-color: darkorange;
}

.div {
  width: 100%;
  height: 50px;
  background-color: rgb(59, 59, 59);
  color: #fff;
}
.div ul {
  display: flex;
  height: 100%;
  line-height: 50px;
  justify-content: flex-end;
  align-items: center;
  list-style: none;
}
.div ul li {
  margin-right: 45px;
}

.div:hover {
  color: #fff;
}
.header {
  width: 100%;
  background-color: #fff;
  padding: 20px;
}
.box {
  width: 90%;
  margin: auto;
}
.box ul {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  list-style: none;
  border-bottom: 1px solid rgb(188, 188, 188);
  position: relative;
}
.box ul li {
  width: 8%;
  height: 60px;
  text-align: center;
  line-height: 60px;
  margin-left: 50px;
  padding-bottom: 10px;
}

.two {
  position: absolute;
  right: 20px;
}
a {
  color: rgb(159, 159, 159);
  text-decoration: none;
}
.box .active {
  color: rgb(64, 158, 255);
  border-bottom: 2px solid rgb(64, 158, 255);
}
</style>
